*{
    margin: 0;
    padding: 0;
    list-style: none;
}
html,body{
    height: 100%;
    overflow: hidden;
}
.back{
    background-image: url(backg.jpg);
    width: 3920px;
    height: 100%;
    margin-left: -2000px;
    animation: back_move 5s infinite linear;
    float: left;
}
@keyframes back_move{
    from{
        margin-left: -1920px;
    }
    to{
        margin-left: 0;
    }
}
.centent{
    height: 400px;
    width: 600px;
    border: 1px solid red;
    position: absolute;
    left: 30%;
    top: 30%;
}
.wk{
    width: 200px;
    height: 180px;
    /* border: 1px solid black; */
    
    overflow: hidden;
    /* z-index: 999; */
    position: absolute;
    left: 30%;
    top: 50%;
}
.wk img{
    height: 180px;
    /* border: 1px solid black; */
    animation: wk_move 1s steps(8) infinite;
}
@keyframes wk_move{
    from{
        margin-left: 0;
    }
    to{
        margin-left: -1600px;
    }
}
.bj{
    width: 200px;
    height: 180px;
    /* border: 1px solid black; */
    
    overflow: hidden;
    /* z-index: 999; */
    position: absolute;
    left: 40%;
    top: 50%;
}
.bj img{
    height: 180px;
    /* border: 1px solid black; */
    animation: wk_move 1s steps(8) infinite;
}
.ts{
    width: 170px;
    height: 240px;
    /* border: 1px solid black; */
    
    overflow: hidden;
    /* z-index: 999; */
    position: absolute;
    left: 48%;
    top: 46%;
}
.ts img{
    height: 240px;
    /* border: 1px solid black; */
    animation: ts_move 1s steps(8) infinite;
}
@keyframes ts_move{
    from{
        margin-left: 0;
    }
    to{
        margin-left: -1360px;
    }
}
.ss{
    width: 210px;
    height: 200px;
    /* border: 1px solid black; */
    overflow: hidden;
    z-index: 1;
    position: absolute;
    left: 62%;
    top: 45%;
}
.ss img{
    height: 240px;
    /* border: 1px solid black; */
    animation: ss_move 1s steps(8) infinite;
}
@keyframes ss_move{
    from{
        margin-left: -1680px;
    }
    to{
        margin-left: 0;
    }
}